<template>
    <div class="swipe-container">
        <van-swipe class="my-swipe" :autoplay="2500" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banners" :key="index">
                <img :src="item.url" :alt="item.name" class="banner-image" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getHomeData } from '@/api/home';

const banners = ref([]);

onMounted(async () => {
    const response = await getHomeData();
    banners.value = response.data.banner;
});
</script>

<style scoped>
.swipe-container {
    width: 100%;
    overflow: hidden;
}

.my-swipe {
    width: 100%;
    aspect-ratio: 16/9;
}

.my-swipe .van-swipe-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-image {
    width: 100%;
    height: auto;
    object-fit: fill;
    display: block;
}
</style>